<template>
	<div class="flexcenter">
		<div class="max_width paddingtb">
			<!-- 课程详情 -->
			<div class="flex">
				<div class="imgBox margin_right2">
					<!-- <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
						:options="playerOptions" @pause="onPlayerPause($event)" @ready="playerReadied($event)"
						@timeupdate="onPlayerTimeupdate($event)">
					</video-player> -->
					<video width="387" height="215" controls ref="myVideo" @timeupdate="timeupdate" @ended="ended"
						@pause="pause">
						<source :src="info.video_text" type="video/mp4">
						<!-- <source src="movie.ogg" type="video/ogg"> -->
					</video>
					<!-- <video :src="info.video_text"></video> -->
				</div>
				<!-- <img class="imgBox margin_right2" :src="info.image_text" alt=""> -->
				<div class="flex1 word_wrap justify_between_column">
					<div class="text_bs color_zero">{{ info.name }}</div>
					<div class="text_f color_six lianghang">
						{{ info.description }}
					</div>
					<div class="flexleft">
						<div class="vipBox margin_right1" v-if="info.is_vip == 1">VIP</div>
						<div class="num">编号：{{ info.id }}</div>
					</div>
					<div class="flexbetween">
						<div class="color_red">
							<span class="priceText">￥</span>
							<span class="price">{{ info.price }}</span>
						</div>
						<div class="flexleft">
							<div class="margin_right3 flexleft pointer" @click="collect(info.id)">
								<i class="el-icon-star-on margin_right1 color_theme" style="font-size: 20px;"
									v-if="info.is_collect"></i>
								<i class="el-icon-star-off margin_right1" v-else></i>
								<span class="text_d color_six">收藏</span>
							</div>
							<el-button type="primary" round style="background-color: #3478F5;" @click="goConfirmOrder"
								v-if="!info.is_free">立即购买</el-button>
						</div>
					</div>
				</div>
			</div>
			<!-- 课程介绍、用户评价、老师 -->
			<div class="flexbetween align_start margin_top5">
				<div class="mainpadding ffffff radius" style="width: 75%;">
					<div class="flexleft">
						<div class="margin_right3 pointer" :class="tabActive == 0 ? 'active' : 'noActive'"
							@click="tabActive = 0">
							课程介绍
						</div>
						<div class="pointer" :class="tabActive == 1 ? 'active' : 'noActive'" @click="tabActive = 1">
							用户评价({{ comments.length }})</div>
					</div>
					<!-- 课程介绍 -->
					<div class="margin_top" v-show="tabActive == 0">
						<div v-html="info.content"></div>
					</div>
					<!-- 用户评价 -->
					<div v-show="tabActive == 1">
						<div class="margin_top flex" v-for="item in comments" :key="item.id">
							<img class="userImg margin_right2" :src="item.avatar" alt="">
							<div class="flex1">
								<div class="flexbetween">
									<div>
										<div class="text_h color_zero">{{ item.nickname }}</div>
										<div class="text_b color_six">{{ item.createtime_text }}</div>
									</div>
									<div class="flexleft">
										<div class="face1_active margin_right1" v-if="item.composite_evaluate == 5">
										</div>
										<div class="face2_active margin_right1" v-if="item.composite_evaluate == 3">
										</div>
										<div class="face3_active margin_right1" v-if="item.composite_evaluate == 1">
										</div>
										<div class="text_d color_theme">{{ item.composite_evaluate_text }}</div>
									</div>
								</div>
								<div class="text_f color_three margin_top1">
									{{ item.content }}
								</div>
								<div class="margin_top2 flexleft">
									<div class="commImg margin_right1" v-for="(value, i) in item.images_arr" :key="i">
										<img :src="value" alt="">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="width: 23%;">
					<div class="mainpadding ffffff radius">
						<div class="flexbetween">
							<div class="flexleft">
								<img class="userImg margin_right2" :src="info.teacher.avatar" alt="">
								<div class="text_ft color_three">{{ info.teacher.username }}</div>
							</div>
							<div class="themeBtn" @click="goTeacherInfo(info.teacher.id)">进入主页</div>
						</div>
						<div class="margin_top2 text_d color_six">
							{{ info.teacher.description }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getCourseInfo, getCollectCourse, getAddRecord } from "@/API/home"
	export default {
		data() {
			return {
				tabActive: 0, // 0课程介绍 1用户评价
				id: "",
				info: {},
				comments: [],
				playerOptions: {
					playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
					autoplay: false,  // 如果为true,浏览器准备好时开始回放
					muted: false,     // 默认情况下将会消除任何音频。
					loop: false,      // 是否视频一结束就重新开始。
					preload: 'auto',  // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9',  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true,  // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: "video/mp4",  // 类型
						src: ''             // url地址
					}],
					poster: '',  // 封面地址
					notSupportedMessage: '此视频暂无法播放，请稍后再试',  // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						timeDivider: true,           // 当前时间和持续时间的分隔符
						durationDisplay: true,       // 显示持续时间
						remainingTimeDisplay: false, // 是否显示剩余时间功能
						fullscreenToggle: true       // 是否显示全屏按钮
					}
				},//视频配置信息
				playerTime: "",//当前播放进度
				currentTime: "",
				alltime: "",
			}
		},
		created() {
			this.id = this.$route.query.id
			this.getInfo(this.id)
		},
		destroyed() {
			let rate = this.currentTime / this.alltime * 100
			this.addlog(rate)
		},
		methods: {
			async addlog(val) {//添加学习记录
				let res = await getAddRecord({
					id: this.id,
					view_per: val
				})
			},
			timeupdate(e) {
				console.log(e)
				this.currentTime = Number(e.target.currentTime);
				this.alltime = Number(e.target.duration)
				if (!this.info.is_free) {
					if (Number(e.target.currentTime) >= this.info.duration) {
						this.$message.error("试看结束")
						// this.playerTime = Math.floor(e.cache_.currentTime)
						// console.log(this.playerTime)
						// console.log("到了")
						this.$refs.myVideo.pause()
					}
				}
			},
			pause() {
				let rate = this.currentTime / this.alltime * 100
				this.addlog(rate)
				console.log("暂停了")
			},
			ended() {
				this.addlog(100)
				console.log("结束了")
			},
			async getInfo(id) {
				let res = await getCourseInfo({
					id
				})
				this.info = res.data.data.info
				this.comments = res.data.data.comments
				this.playerOptions.sources[0].src = this.info.video_text
				console.log(this.comments, "comments")
			},
			async collect(id) { //收藏、取消收藏
				let res = await getCollectCourse({ id })
				if (res.data.code == 1) {
					this.$message.success(res.data.msg)
					this.getInfo(this.id)
				} else {
					this.$message.error(res.data.msg)
				}
			},

			// onPlayerTimeupdate(e) { //获取播放进度
			// 	// console.log(e.cache_.currentTime)
			// 	if (Math.floor(e.cache_.currentTime) >= this.info.duration) {
			// 		this.playerTime = Math.floor(e.cache_.currentTime)
			// 		console.log(this.playerTime)
			// 		console.log("到了")
			// 		this.$refs.videoPlayer.player.pause()
			// 	}
			// },
			// playerReadied(player) { //设置进度
			// 	console.log(111)
			// 	player.currentTime(0)
			// },
			// onPlayerPause() { //视频暂停
			// 	if (this.playerTime == this.info.duration) {
			// 		console.log(222)
			// 		this.playerReadied()
			// 	}
			// },
			goConfirmOrder() { //立即购买
				this.$router.push({
					path: "/confirmOrder",
					query: {
						id: this.id
					}
				})
			},
			goTeacherInfo(id) { //进入主页
				this.$router.push({
					path: "/teacher/teacherInfo",
					query: {
						id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgBox {
		width: 387px;
		height: 215px;
		min-width: 387px;
		/* // background: rgba(0,0,0,0.6); */
		border-radius: 8px 8px 8px 8px;
	}

	.vipBox {
		padding: 5px 10px;
		background: rgba(255, 0, 0, .1);
		border-radius: 6px 6px 6px 6px;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	.num {
		padding: 5px 10px;
		background: rgba(153, 153, 153, .1);
		border-radius: 6px 6px 6px 6px;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.priceText {
		font-size: 20px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.price {
		font-size: 36px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.noActive {
		font-size: 15px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.active {
		font-size: 15px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		position: relative;
	}

	.active::after {
		content: '';
		width: 22px;
		height: 2px;
		background: #3478F5;
		border-radius: 6px 6px 6px 6px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10px;
	}

	.userImg {
		width: 41px;
		height: 41px;
		border-radius: 50%;
	}

	.informationImg {
		width: 26.65px;
		height: 26.65px;
	}

	.lockImg {
		width: 12px;
		height: 12px;
	}

	.commImg {
		width: 58px;
		height: 58px;

		img {
			width: 100%;
			height: 100%;
			border-radius: 9px;
		}
	}

	.faceImg {
		width: 17px;
		height: 17px;
	}
</style>